<!--首页-->
<template>
  <div class="new">
    <!--我的消息tab切换-->
    <div class="new-tab">
      <div
        @click="getAllList(-1)"
        class="new-tab-list"
        :class="{active:cur==-1}"
      >全部 ({{messageNum}})</div>
      <div
        @click="getAllList(1)"
        class="new-tab-list"
        :class="{active:cur==1}"
      >已读（{{messagereadNum}}）</div>
      <div
        @click="getAllList(0)"
        class="new-tab-list"
        :class="{active:cur==0}"
      >未读（{{messageUnreadNum}}）</div>
    </div>
    <!--全部-->
    <div class="new-list">
      <div class="follow-union-center">
        <div
          class="follow-union-list"
          style="overflow: hidden"
          v-for="item in messageList"
          :key="item.id"
          v-show="item.readFlag == cur || cur == -1"
        >
          <div
            class="follow-union-list-right"
            style="position: relative;"
            @click="messageDetails(item.id)"
          >
            <div class="follow-union-list-title">
              <span>
                <img
                  style="width:20px;height:20px;cursor: pointer;float:left;margin-right:20px"
                  src="../assets/images/icon_fujian.png"
                >
                <span
                  style="width:400px;overflow: hidden;text-overflow:ellipsis;white-space: nowrap;"
                >{{item.title}}</span>
              </span>
              <span>
                <span style="padding-top:2px;padding-right:20px">{{item.sendTime}}</span>
                <img
                  style="width:20px;height:20px;cursor: pointer;"
                  @click.stop="delBtn(item.id)"
                  src="../assets/images/icon_delete.png"
                >
              </span>
            </div>
          </div>
        </div>
      </div>
      <div class="new-page" v-show="messageNum>=1">
        <el-pagination
          @size-change="(val) => {query.size=val;getAllList()}"
          @current-change="(val) => {query.page=val;getAllList()}"
          background
          :page-sizes="[5,10,15,20]"
          :page-size="query.size"
          :current-page.sync="query.page"
          layout="total, prev, pager, next"
          :total="messageTotal"
        ></el-pagination>
      </div>
    </div>
    <!--消息详情页-->
    <el-dialog :visible.sync="dialogVisible" :show-close="false" width="50%">
      <div style="position:relative">
        <h2 style="font-size:16px;position: absolute;top:-30px">{{messageDetailList.title}}(系统消息)</h2>
        <p style="padding:15px;">{{messageDetailList.sendTime}}</p>
        <div class="dislogtc" style="padding:0 20px 0px 40px;max-height:200px;overflow-y:auto">
          <p>{{messageDetailList.content}}</p>
        </div>
        <div v-for="item in messageDetailList.files" style="padding:20px 0 0 20px;" :key="item.id">
          <p>
            <a :href="item" class="fujiancs">附件下载</a>
          </p>
        </div>
      </div>
      <span slot="footer" class="dialog-footer">
        <el-button @click="goback()">返 回</el-button>
        <!-- <el-button type="primary" @click="dialogVisible = false">确 定</el-button> -->
      </span>
    </el-dialog>
  </div>
</template>

<script>
import * as othersAPI from "@/api/others";

export default {
  name: "New",
  data() {
    return {
      cur: -1,
      dialogVisible: false,
      messageList: [], //全部
      messageTotal:'', //消息总数

      messageNum: 0, //全部消息数量
      messageUnreadNum: 0, //未读消息数量
      messagereadNum: 0, //已读消息数量
      messageDetailList: [], //消息详情
      query: {
        readFlag: -1,
        page: 1,
        size: 5
      }
    };
  },
  created() {
    this.getAllList(-1);
  },
  methods: {
    //查看详情
    messageDetails(id) {
      this.dialogVisible = true;
      var $this = this;
      othersAPI
        .messageget({ messageId: id })
        .then(res => {
          $this.messageDetailList = res.data;
        })
        .catch(err => {
          console.log("查看用户详情失败...");
        });
    },
    //获取用户消息数量
    getMessageCount() {
      othersAPI
        .messageCount()
        .then(res => {
          this.messageNum = res.data.total;
          this.messageUnreadNum = res.data.unreadCount;
          this.messagereadNum = res.data.readCount;
        })
        .catch(err => {
          console.log("获取用户消息数量失败...");
        });
    },
    //删除消息
    delBtn(id) {
      var query = { messageId: id };
      this.$confirm("确定删除此消息?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning"
      })
        .then(() => {
          othersAPI.deleteMessage(query).then(res => {
            this.getAllList(this.cur);
            this.getMessageCount();
          });
        })
        .catch(err => {
          this.$message.warning("删除失败，请重试！");
          console.log("删除用户消息失败...");
        });
    },
    // 获取消息列表
    getAllList(type) {
      this.messageList = [];
      this.cur = type;
      this.query.readFlag = type;
      othersAPI
        .messageList(this.query)
        .then(res => {
          this.messageTotal = res.data.total;
          this.getMessageCount();
          this.messageList = res.data.list;
        })
        .catch(err => {
          this.$message.warning("消息列表获取有误！");
          console.log(err);
        });
    },
    goback() {
      this.dialogVisible = false;
      this.getAllList(this.cur);
      this.getMessageCount();
    }
  }
};
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
.new {
  padding: 25px;
  height: auto;
  overflow: auto;
}
/*我的消息tab切换样式*/
.new-tab {
  display: flex;
  padding: 30px 0;
  background: #ffffff;
  position: relative;
}
.new-tab-list {
  cursor: pointer;
  width: 150px;
  text-align: center;
  color: #778ca2;
  font-size: 14px;
}
.new-tab .active {
  color: #009fe8;
}
.new-tab .active:after {
  content: "";
  width: 80px;
  height: 2px;
  margin: 5px auto;
  display: block;
  background: #009fe8;
}
/*我的消息列表样式*/
.new-list {
  background: #ffffff;
  padding: 0 35px 30px 35px;
}
/*.new-list-item{box-shadow: 0 2px 8px 0 rgba(0,0,0,0.05);padding: 15px 15px; margin-bottom: 30px; display: flex;}*/
/*.new-list-header-title{color: #333333; font-size: 12px;}*/
/*.new-list-cont{ padding-top: 12px; color: #666666; font-size: 12px; overflow:hidden; text-overflow:ellipsis;  display:-webkit-box;  -webkit-box-orient:vertical;  -webkit-line-clamp:2; }*/
/*.new-list-footer{ padding-top: 15px; display: flex;justify-content: space-between; align-items: center;}*/
/*.new-list-footer-attach{display: flex; color: #666666; font-size: 10px; justify-content: center; align-items: center;}*/
/*.new-list-footer-attach > img{width: 18px; height: 18px; margin-right: 5px;}*/
/*.new-list-footer-img{width: 24px; height: 24px;}*/
.new-page {
  display: flex;
  justify-content: center;
  padding: 35px 0 15px 0;
}
.follow-union-center {
  display: flex;
  flex-wrap: wrap;
  white-space: nowrap;
  justify-content: space-between;
  background: #ffffff;
}
.follow-union-title {
  color: #778ca2;
  font-size: 12px;
  padding: 0 40px;
}
.follow-union-list {
  background: #ffffff;
  margin: 10px 0 10px 0;
  display: flex;
  border-radius: 10px;
  box-shadow: 0px 0px 20px 2px rgba(0, 0, 0, 0.1);
}
/* .follow-union-list-left{width: 220px; height:150px;padding-right: 20px; float: left;}
  .follow-union-list-left > img{border-top-left-radius: 10px; border-bottom-left-radius: 10px; height: 100%} */
.follow-union-list-right {
  width: 840px;
  height: 60px;
  padding: 0 20px;
}
.follow-union-list-title {
  width: 100%;
  display: flex;
  justify-content: space-between;
  padding-top: 20px;
  color: #333333;
  font-size: 14px;
}
.follow-union-list-num {
  padding-top: 0px;
  color: #666666;
  font-size: 12px;
  width: 90%;
  padding-left: 2%;
}
.follow-union-list-num > span {
  color: #39b4ff;
  font-size: 16px;
}
.follow-union-list-title span {
  float: left;
}
.fujiancs {
  color: #99ccff;
  font-size: 13px;
  padding: 5px;
  border: 1px solid #99ccff;
  cursor: pointer;
  border-radius: 15px;
}
.fujiancs:hover {
  border: 1px solid #6699ff;
  color: #6699ff;
}
.follow-union-list-bt {
  display: flex;
  justify-content: space-between;
  padding-top: 10px;
}
.follow-union-list-l {
  font-size: 12px;
  color: #009fe8;
  margin-right: 20px;
}
.follow-union-list-img {
  width: 25px;
  height: 25px;
  font-size: 12px;
  color: #999999;
  cursor: pointer;
  display: flex;
  align-content: center;
}
</style>
